<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Badge - Basic</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src="/dist/ionic.js"></script>
</head>

<body>
  <ion-app>

      <ion-header>
        <ion-toolbar>
          <ion-title>Badge - Basic</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content id="content">
        <ion-list>
          <ion-list-header>Badges Right</ion-list-header>
          <ion-item>
            <ion-label>Default Badge</ion-label>
            <ion-badge slot="end">00</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Primary Badge</ion-label>
            <ion-badge slot="end" color="primary">11</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Secondary Badge</ion-label>
            <ion-badge slot="end" color="secondary">22</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Tertiary Badge</ion-label>
            <ion-badge slot="end" color="tertiary">33</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Success Badge</ion-label>
            <ion-badge slot="end" color="success">44</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Warning Badge</ion-label>
            <ion-badge slot="end" color="warning">55</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Danger Badge</ion-label>
            <ion-badge slot="end" color="danger">66</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Light Badge</ion-label>
            <ion-badge slot="end" color="light">77</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Medium Badge</ion-label>
            <ion-badge slot="end" color="medium">88</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Dark Badge</ion-label>
            <ion-badge slot="end" color="dark">99</ion-badge>
          </ion-item>
          <ion-item onclick="toggleColor()">
            <ion-badge id="toggleColor" slot="end" color="primary">primary</ion-badge>
            <ion-label>Dynamic Badge Color (toggle)</ion-label>
          </ion-item>
        </ion-list>

        <ion-list>
          <ion-list-header>Badges Left</ion-list-header>
          <ion-item>
            <ion-label>Default Badge</ion-label>
            <ion-badge slot="start">00</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Primary Badge</ion-label>
            <ion-badge slot="start" color="primary">11</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Secondary Badge</ion-label>
            <ion-badge slot="start" color="secondary">22</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Tertiary Badge</ion-label>
            <ion-badge slot="start" color="tertiary">33</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Success Badge</ion-label>
            <ion-badge slot="start" color="success">44</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Warning Badge</ion-label>
            <ion-badge slot="start" color="warning">55</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Danger Badge</ion-label>
            <ion-badge slot="start" color="danger">66</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Light Badge</ion-label>
            <ion-badge slot="start" color="light">77</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Medium Badge</ion-label>
            <ion-badge slot="start" color="medium">88</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Dark Badge</ion-label>
            <ion-badge slot="start" color="dark">99</ion-badge>
          </ion-item>
        </ion-list>
      </ion-content>


  </ion-app>

  <script>
    const badge = document.querySelector('#toggleColor');

    function toggleColor() {
      const prev = badge.getAttribute('color');
      badge.setAttribute('color', prev === 'secondary' ? 'primary' : 'secondary');
      badge.innerHTML = prev === 'secondary' ? 'primary' : 'secondary';
    }
  </script>
</body>
</html>
